<script lang="ts" setup>
import { onMounted, ref } from 'vue'; // 引入 Vue 的生命周期钩子
import type { MindElixirData } from 'mind-elixir';
// import MindElixir from 'mind-elixir'; // 引入 MindElixir
import { Position } from "@vue-flow/core";
import { VueFlow } from "@vue-flow/core";
import { Background } from "@vue-flow/background";

interface MindMapProps {
  data: MindElixirData; // 定义 props 的类型
}

// 接收 props
const props = defineProps<MindMapProps>();

// 定义 VueFlow 节点的接口
interface VueFlowNode {
  id: string;
  type: string;
  position: { x: number; y: number };
  data: { label: string; labelNoId?: string };
  sourcePosition?: Position;
  targetPosition?: Position;
  style?: { backgroundColor: string; fontWeight: string; fontSize: string };
}

// 定义 VueFlow 边的接口
interface VueFlowEdge {
  id: string;
  source: string;
  target: string;
  sourceHandle?: string;
  targetHandle?: string;
  animated?: boolean;
  style?: { stroke: string; strokeWidth: number };
}

// 初始化 VueFlow 的 nodes 为一个空数组，为后续从jsonContent中解析数据做准备
const nodes = ref<VueFlowNode[]>([]);

// 初始化 VueFlow 的 edges 为一个空数组，为后续从jsonContent中解析数据做准备
const edges = ref<VueFlowEdge[]>([]);

onMounted(() => {
  // 判断是否为整数
  const isInteger = (str: string): boolean => {
    const num = parseInt(str, 10);
    return Number.isInteger(num) && num.toString() === str;
  };

  // const mind = new MindElixir({
  //   el: '#map', // 渲染脑图的DOM元素
  //   direction: MindElixir.RIGHT, // 脑图的方向
  //   draggable: false, // 禁用节点拖动
  //   contextMenu: false, // 禁用右键菜单
  //   toolBar: true, // 隐藏工具栏
  //   keypress: false, // 禁用键盘操作
  //   editable: false, // 设置为不可编辑
  // });

  // mind.init(props.data); // 使用传入的数据初始化脑图

  // // 如果 data 更新，重新初始化脑图
  // watch(
  //   () => props.data,
  //   (newData) => {
  //     mind.init(newData); // 使用新数据重新初始化脑图
  //   },
  // );

  // 深度优先遍历props.data并打印
  const dfs = (node: any, parentId: string, curId: string) => {
    if (!node)
      return;

    const id = curId || node.id;
    const label = node.topic;
    const position = { x: 0, y: 0 };
    const type = 'default';
    const sourcePosition = Position.Right;
    const targetPosition = Position.Left;

    nodes.value.push({ id, type, position, data: { label }, sourcePosition, targetPosition });

    if (parentId)
      edges.value.push({ id: `${parentId}.${id}`, source: parentId, target: id });

    if (node.children) {
      node.children.forEach((child: any, index: number) => {
        dfs(child, id, `${id}.${index + 1}`);
      });
    }
  };

  dfs(props.data.nodeData, '', 'root');
  // console.log("nodes", nodes.value);

  // 遍历 VueFlow 的 nodes，处理id和位置
  for (let i = 0; i < nodes.value.length; i++) {
    const node = nodes.value[i];

    // 1、处理id
    // 如果是根节点
    if (node.id === 'root') {
      node.position = { x: 0, y: 0 };
    }
    else {
      // 把id前面的root.去掉
      node.id = node.id.replace('root.', '');
    }

    // 2、处理位置
    // 通过.将id分割为数组，据此确定X轴位置
    const idArray = node.id.split('.');
    const curX = (idArray.length - 1) * 150;
    const previousY = i > 0 ? nodes.value[i - 1].position.y : 0;
    node.position = { x: curX, y: previousY + 100 };

    // 3、处理Position
    if (isInteger(node.id) || node.id === 'root') {
      node.sourcePosition = Position.Bottom;
      node.targetPosition = Position.Top;
      node.style = { backgroundColor: "orange", fontWeight: "bold", fontSize: "15px" };
    }
    else {
      node.sourcePosition = Position.Bottom;
      node.targetPosition = Position.Left;
      node.style = { backgroundColor: "lightblue", fontWeight: "bold", fontSize: "12px" };
    }

    // 4、生成edges
    if (node.id !== 'root') {
      if (isInteger(node.id)) {
        // 一级节点
        // 父节点为id小1的节点
        const parentId = parseInt(node.id, 10) - 1;
        edges.value.push({
          id: `edge-${node.id}`,
          source: parentId.toString(),
          target: node.id,
          animated: true,
          style: { stroke: 'orange', strokeWidth: 4 },
        });
      }
      else {
        // 非一级节点
        // 父节点为id去掉最后一个.的节点
        const parentId = node.id.substring(0, node.id.lastIndexOf('.'));
        edges.value.push({
          id: `edge-${node.id}`,
          source: parentId,
          target: node.id,
          animated: true,
          style: { stroke: 'lightblue', strokeWidth: 2 },
        });
      }
    }

    // 5、重新设置label，在前面加上id
    node.data.labelNoId = node.data.label;
    node.data.label = `${node.id} ${node.data.label}`;
    if (node.id === 'root') {
      // 替换label开始的root
      node.data.label = node.data.label.replace('root ', '');
    }
  }

  // 再补充一个root-1的边
  edges.value.push({
    id: 'edge-root-1',
    source: 'root',
    target: '1',
    animated: true,
    style: { stroke: 'orange', strokeWidth: 4 },
  });

  // console.log("nodes", nodes.value);
  // console.log("edges", edges.value);
});
</script>

<template>
  <VueFlow :nodes="nodes" :edges="edges" style="height: 90vh; width: 100%; color: red;">
    <Background pattern-color="#666" :gap="16" />
  </VueFlow>
  <!-- <div id="map" style="width: 100%; height: 750px" /> -->
</template>

<style>
/* 样式可以根据需要自定义 */
@import "@vue-flow/core/dist/style.css";
@import "@vue-flow/core/dist/theme-default.css";
/* 参考博客：https://blog.csdn.net/RenGJ010617/article/details/140619433 */
/* 官方examples：https://vueflow.dev/examples/ */
</style>
